/**
 * @description  交易监控
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Divider } from 'antd';
import { SecondHeaderC, MapEchartsC } from '../../../comps';
import style from './index.less';

class mapEchart extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  // 地图点击事件
  clickData = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'TransactionMonitoringM/save',
      payload: { areaName: e.name },
    });
  };

  render() {
    const {
      TransactionMonitoringM: { tableData, areaName },
    } = this.props;
    let dataList = tableData.dataSource;
    const totalOrgan = tableData.totalOrgan;
    const totalProduct = tableData.totalProduct;
    let index = dataList.length;
    dataList = dataList.map((v) => {
      return { ...v, size: index-- };
    });
    return (
      <div className={style.body_area}>
        <SecondHeaderC title='区域统计' />
        <div className='textArea'>
          <Row type='flex' justify='center'>
            <Col span={11}>
              <span>{`累计机构数量：${totalOrgan !== null ? totalOrgan : '--'}`}</span>
            </Col>
            <Col span={2}>
              <Divider type='vertical' style={{ height: '27px', marginBottom: '3px' }} />
            </Col>
            <Col span={11}>
              <span>{`累计产品数量：${totalProduct !== null ? totalProduct : '--'}`}</span>
            </Col>
          </Row>
        </div>
        <div className='mapEcharts'>
          <MapEchartsC
            dataList={dataList}
            click={(e) => this.clickData(e)}
            defaultName={areaName}
            //  width='100%'
            height='500px'
          />
        </div>
      </div>
    );
  }
}
export default connect(({ TransactionMonitoringM }) => ({
  TransactionMonitoringM,
}))(mapEchart);
